<script setup>
import Header from '@/components/header/Header.vue';
import Tab from './components/Tab.vue';
import ActivityCard from './components/ActivityCard.vue';
import MallCard from './components/MallCard.vue';
import HaishuaCard from './components/HaishuaCard.vue';
import PandaCard from './components/PandaCard.vue';
import {computed, ref, watch} from 'vue';
import {useRoute} from 'vue-router';
import api from '@/api/index.js';
import {useKeepalive} from '@/hooks/useKeepalive.js';
import CouponOrderCard from "@/views/order/components/CouponOrderCard.vue";
import {userStore} from "@/stores/user.js";

defineOptions({
  name: 'OrderList',
});

const needSaveRoute = [
  'scenicOrderDetail',
  'pandaOrderDetail',
  'scenicDetail',
  'hotelDetail',
];
const {scrollYEle} = useKeepalive(needSaveRoute, 'OrderList');

const list = ref([]);
const error = ref(false);
const loading = ref(true);
const finished = ref(true);
const refreshing = ref(false);
const totalCount = ref(0);
const route = useRoute();

const type = 'mall';

let getOrderList = null;
const title = ref('');
const initPage = () => {
  getOrderList = api.getCouponOrderList;
  // title.value = '社区商店订单';
};
initPage();

const params = {
  pageNum: 1,
  pageSize: 10,
  //  "预约类型，0-活动；1-办公室；2-会议室；3-健身房 4-便民服务"
  reservationType: route.query.title,
  // uid:userStore().userInfo?.memberId,
};

const titleHeader = route.query.title == 0 ? '活动预约订单' : '共享预约订单';
const ordinaryFinished = ref(false);
const _getOrderList = () => {
  console.log('_getOrderList')
  error.value = false;
  loading.value = true;
  // 订单状态 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消 11 订单异常

  try {
    getOrderList(params)
        .then((res) => {
          list.value = [...list.value, ...res.data.list];
          finished.value = res.data.currPage === res.data.totalPage;
          totalCount.value = list.value.length;
          params.pageNum += 1;
          ordinaryFinished.value = false;
          loading.value = false;
          refreshing.value = false;
          console.log('getOrderList resp');


        })
        .finally(() => {
          refreshing.value = false;
          loading.value = false;
        });
  } catch (e) {
    console.log('e=', e);
    error.value = true;
    loading.value = false;

  }
}

// 普通订单 订单状态:0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退
// 熊猫订单 订单状态 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消

const onLoad = () => {
  console.log('onLoad');
  // loading.value = true;
  finished.value = false;
  _getOrderList();
};
onLoad();

const onRefresh = () => {
  console.log('on refresh')
  // loading.value = true;
  resetting();
};

const resetting = () => {
  refreshing.value = true
  console.log('resetting')
  params.pageNum = 1;
  list.value = [];
  ordinaryFinished.value = false;
  onLoad();
};

const changeTab = (key) => {
  // loading.value = true;
  params.status = key
  resetting();
};

watch(error, (val) => {
  if (!val) {
    // loading.value = true;
    resetting();
  }
});

const isShowVanList = computed(() => {
  if (list.value.length) {
    return true;
  }
  if (loading.value || refreshing.value) {
    return true;
  }
  return !!error.value;

});

// 刷新页面数据
const cancelOrderResetting = () => {
  resetting();
};


console.log('setup asdasdasd')

const container = ref(null)
</script>

<template>

  <div class="order" ref="container">
    <Tab :type=" route.query.title == 0 ?'activity':'share'" @changeTab="changeTab"/>

    <div class="content" ref="scrollYEle">
      <van-pull-refresh
          class="van_pull_refresh"
          v-model="refreshing"
          @refresh="onRefresh"
      >
        <van-list
            v-if="isShowVanList"
            v-model:loading="loading"
            v-model:error="error"
            :finished="finished"
            finished-text="没有更多了"
            error-text="出错了，点击重试"
            @load="()=>{
              console.log(' @load')
              onLoad()
            }"
        >
          <CouponOrderCard
              class="list"
              v-for="item in list"
              :key="item"
              :data="item"
              @cancelOrderResetting="cancelOrderResetting"
              :type="type"
          />
        </van-list>

        <div v-else>
          <div class="none">
            <img
                class="none_img"
                src="@/assets/images/index/none1.png"
                alt=""
            />
            <span>暂无订单信息，去逛逛</span>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order {


  .content {
    background: #f9f8f3;
    overflow-y: hidden;
    padding-top: 1.5rem;
    height: 100%;

    .van_pull_refresh {
      min-height: 100%;

      .list {
        margin: 0 1.5rem 1.5rem 1.5rem;
      }

      .none {
        display: flex;
        flex-direction: column;
        align-items: center;

        .none_img {
          width: 6rem;
          margin: 14.4rem 0 1rem 0;
        }

        span {
          font-size: 1.4rem;
          color: #666666;
        }
      }
    }
  }
}
</style>
